<template>
  <button @click="show">展示</button>
  <button @click="hide">隐藏</button>
  <div v-if="showDiv">我是一个大盒子</div>
  <button @click="red">红色</button>
  <button @click="orange">橙色</button>
  <div :style="`color:${color}`">看我的字体颜色</div>
</template>

<script>
import { ref } from "vue";
// 功能1
function changeShow() {
  const showDiv = ref(true);
  function show() {
    showDiv.value = show;
  }
  function hide() {
    showDiv.value = false;
  }
  return {
    showDiv,
    show,
    hide,
  };
}
// 功能2
function changeColor() {
  const color = ref("");
  function red() {
    color.value = "red";
  }
  function orange() {
    color.value = "orange";
  }
  return {
    color,
    red,
    orange,
  };
}
export default {
  name: "APP",
  setup() {
    const { showDiv, show, hide } = changeShow();
    const { color, red, orange } = changeColor();
    return {
      showDiv,
      show,
      hide,
      color,
      red,
      orange,
    };
  },
};
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */

#app {
  font-size: 36px;
}
</style>
